<template>
    <div class="logincontainer">
        <el-form class="loginform" :model="loginModel" ref="form" :rules="rules" :inline="false" size="large">
            <el-form-item>
                <div class="logintitle">系统登录</div>
            </el-form-item>
            <el-form-item prop="adminName">
                <el-input placeholder="请输入账户" v-model="loginModel.adminName"></el-input>
            </el-form-item>
            <el-form-item prop="adminPassword">
                <el-input type="adminPassword" placeholder="请输入密码" v-model="loginModel.adminPassword"></el-input>
            </el-form-item>
            <!-- <el-form-item prop="code">
                <el-row :gutter="20">
                    <el-col :span="16" :offset="0">
                        <el-input placeholder="请输入验证码" v-model="loginModel.code"></el-input>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <img @click="getImg" class="image" :src="imgsrc" />
                    </el-col>
                </el-row>
            </el-form-item> -->
            <el-form-item>
                <el-row style="width: 100%;">
                    <el-col style="padding-right: 10px; padding-left: 0px" :span="12" :offset="0">
                        <el-button style="width: 100%;" type="primary" size="large" @click="commit">登录</el-button>
                    </el-col>
                    <el-col style="padding-right: 0px; padding-left: 10px" :span="12" :offset="0">
                        <el-button style="width: 100%;" type="primary" size="large" @click="">重置</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup lang="ts">
import { FormInstance } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { imageApi, lgoinApi } from '@/api/user/index'
import { userStore } from '@/store/user/index'
import { useRouter } from "vue-router";
const router = useRouter()
const store = userStore()
//验证码
const imgsrc = ref('')
//表单的ref属性
const form = ref<FormInstance>();
//表单绑定的对象
const loginModel = reactive({
    adminName: "",
    adminPassword: "",
    // code: "",
});
//表单验证规则
const rules = reactive({
    adminName: [{ required: true, message: '请填写账户', trigger: 'change' }],
    adminPassword: [{ required: true, message: '请填写密码', trigger: 'change' }],
    // code: [{ required: true, message: '请填写验证码', trigger: 'change' }]
});
//获取验证码
const getImg = async () => {
    let res = await imageApi()
    if (res && res.code == 200) {
        console.log(res)
        imgsrc.value = res.data;
    }
}
//登录提交
const commit = () => {
    form.value?.validate(async (valid) => {
        if (valid) {
            let res = await lgoinApi(loginModel)
            console.log(res)
            store.setUserId(res.data.id)
            router.push({ path: '/home' })
        }
    })
}
onMounted(() => {
    getImg()
})
</script>
<style lang="scss" scoped>
.logincontainer {
    height: 100%;
    background-color: #fff;
    background-image: url("../../assets/login.png");
    display: flex;
    justify-content: center;
    align-items: center;

    .loginform {
        height: 320px;
        width: 420px;
        padding: 20px 35px;
        border-radius: 10px;
        background-color: #fff;

        .logintitle {
            display: flex;
            justify-content: center;
            color: #606266;
            width: 100%;
            font-size: 24px;
            font-weight: 600;
        }

        .image {
            height: 40px;
            width: 100%;
            cursor: pointer;
        }
    }
}
</style>